"use client";
import { getWheelApi } from "@/api/cashWheel";
import { ServiceTypes } from "@/api/customservice";
import { lredPacketApi, redPacketApi } from "@/api/promo";
import { getGiveInfoApi } from "@/api/slots";
import { Timeout } from "@/components/ModalPopup/RechargeModal";
import RedPacketModal, { RedPacketModalProps } from "@/components/ModalPopup/RedPacketModal";
import SlotsModal, { SlotModalRefProps } from "@/components/ModalPopup/SlotsModal";
import dialogManage from "@/dialog/manager";

import { useEventPoint } from "@/hooks/useEventPoint";
import { Link } from "@/i18n/routing";
import { useFirstPayStore } from "@/stores/useFirstPayStore";
import { useGlobalNoticeStore } from "@/stores/useGlobalNoticeStore";
import useWheelStore from "@/stores/useWheelStore";
import { getToken } from "@/utils/Cookies";
import { useRequest } from "ahooks";
import { Badge } from "antd-mobile";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { FC, useEffect, useRef, useState } from "react";

interface Props {
    services: ServiceTypes[];
}

interface SlotSectionProps {
    onDestory?: () => void;
}
/**
 * 免费送活动
 */
const SlotSection: FC<SlotSectionProps> = ({ onDestory }) => {
    const slotsRef = useRef<SlotModalRefProps | null>(null);
    const getSlots = async () => {
        const token = getToken();
        if (token) {
            const result = await getGiveInfoApi();
            return result.data;
        } else {
            destory();
            return Promise.resolve({});
        }
    };

    const { data: slots, run: slotRun } = useRequest<any, any>(getSlots, {
        pollingInterval: 2000,
        pollingErrorRetryCount: 1,
    });
    const slotHandler = () => {
        slotsRef.current?.onOpen(slots);
    };
    const destory = () => {
        if (onDestory && typeof onDestory === "function") onDestory();
    };

    return (
        <>
            {slots?.id ? (
                <img
                    src={"/slots/slots-icon.gif"}
                    className={"mb-[0.2778rem] w-[100%]"}
                    onClick={slotHandler}
                    alt=""
                />
            ) : null}

            {/*随机送*/}
            <SlotsModal ref={slotsRef} onAfterHandler={slotRun} onClose={destory} />
        </>
    );
};

/**
 * 轮盘
 */
const WheelSection = () => {
    const { wheelStatus } = useWheelStore((state) => ({
        wheelStatus: state.status,
    }));
    return (
        <>
            {wheelStatus === 2 ? (
                <Link
                    href={"/cashWheel"}
                    className={
                        "mb-[0.2778rem] flex h-[0.54rem] w-[0.54rem] items-center" +
                        " justify-center rounded-[50%] bg-gradient-to-b from-[#0575e6] to-[#00f260]"
                    }
                >
                    <Image src={"/wheels/wheel-icon.gif"} alt={"wheel"} width={100} height={100} />
                </Link>
            ) : null}
        </>
    );
};
/**
 * 首充
 */
const PaySection = () => {
    const token = getToken();

    const { firstPay, getPayData } = useFirstPayStore((state) => {
        return {
            firstPay: state.first_pay,
            getPayData: state.getPayData,
        };
    });

    const { data, run: payRun } = useRequest(getPayData, {
        pollingErrorRetryCount: 1,
        pollingWhenHidden: false,
    });
    return (
        <>
            {firstPay.map((item, index) => {
                return (
                    <div
                        key={index}
                        className={`mb-[0.2778rem] flex cursor-pointer flex-col items-center`}
                    >
                        <img
                            className={"w-[0.54rem]"}
                            src="/hby/recharge.png"
                            onClick={() => {
                                dialogManage.showDialog("PaySection", firstPay, index);
                                // userRechargeRef.current?.onOpen &&
                                //     userRechargeRef.current?.onOpen(firstPay, index);
                            }}
                            alt=""
                        />
                        {item.count_down > 0 ? (
                            <Timeout
                                className={
                                    "relative before:left-0 before:top-0 before:content-['']" +
                                    " -m-[0.0417rem] before:h-[100%] before:blur-[0.0486rem]" +
                                    " before:absolute before:-z-10 before:w-[100%] before:bg-[#ed9d00]" +
                                    " text-[0.08rem]" +
                                    " z-1 text-[#fff]"
                                }
                                endTime={item.count_down}
                                onEndHandler={payRun}
                            />
                        ) : null}
                    </div>
                );
            })}
        </>
    );
};

/**
 * 红包雨
 */
const RedPacketSection = () => {
    const token = getToken();
    const redPacketModalRef = useRef<RedPacketModalProps>(null);
    const getRedPacketInfo = async () => {
        try {
            let redPacketInfo: any;
            let actList: any = [];
            if (token) {
                redPacketInfo = await lredPacketApi();
                actList = redPacketInfo.data?.red_packets || [];
            } else {
                redPacketInfo = await redPacketApi();
                actList = redPacketInfo.data || [];
            }

            // 已经开始
            return actList.filter((aItem: any) => {
                return aItem.is_start;
            });
        } catch (error) {}
    };
    // 红包雨轮询
    const { data: packets, run } = useRequest<any[], any>(getRedPacketInfo, {
        pollingInterval: 5000,
        pollingErrorRetryCount: 1,
        pollingWhenHidden: false,
    });
    return (
        <>
            {packets?.map((item, index) => {
                const icons = JSON.parse(item.icon);
                const icon = icons[icons.length - 1];
                return (
                    <div key={index} className={`mb-[0.2778rem] cursor-pointer`}>
                        <img
                            className={"w-[0.54rem] object-fill"}
                            src={icon}
                            onClick={() => {
                                redPacketModalRef.current?.onOpen(packets, index);
                            }}
                            alt=""
                        />
                    </div>
                );
            })}

            {/*红包雨弹窗*/}
            <RedPacketModal ref={redPacketModalRef} onAfterHandler={run} />
        </>
    );
};

const MessageSection = () => {
    const { unread, userUnred } = useGlobalNoticeStore((state) => ({
        unread: state.unread,
        userUnred: state.userUnred,
    }));
    return (
        <>
            {unread || userUnred ? (
                <Link
                    href={"/notification"}
                    className={
                        "mb-[0.2778rem] flex h-[0.54rem] w-[0.54rem] items-center" +
                        " justify-center rounded-[50%] bg-gradient-to-t from-[#ffa111]" +
                        " to-[#ffcf35]"
                    }
                >
                    <Badge content={userUnred + unread} style={{ "--top": "12px" }}>
                        <i className={"iconfont icon-duanxinguanli text-[0.3rem] text-[#fff]"}></i>
                    </Badge>
                </Link>
            ) : null}
        </>
    );
};
/**
 * 客服
 */
const CustomerSection: FC<Omit<Props, "socials">> = (props) => {
    const { services } = props;
    const defaultService = services?.filter((item) => item.is_suspend === 1);
    return (
        <>
            {defaultService?.map((item, index) => (
                <Link
                    key={index}
                    href={item.url}
                    className={
                        "flex h-[0.54rem] w-[0.54rem] items-center justify-center rounded-[50%]" +
                        " bg-gradient-to-t from-[#ff611b] to-[#ffcf35]"
                    }
                    target={"_blank"}
                >
                    <img
                        className={"h-[0.3889rem] w-[0.3889rem] object-contain"}
                        src={item.icon_url}
                        alt={""}
                    ></img>
                </Link>
            ))}
        </>
    );
};

const ServiceWidget: FC<Props> = (props) => {
    const { services } = props;
    const [type, setType] = useState<number>(0);

    const { eventView } = useEventPoint();
    const newServices = services?.filter((item) => item.status === 1) || [];

    const getWheel = () => {
        if (!getToken()) return Promise.resolve(undefined);
        return getWheelApi().then((res) => {
            return res.data;
        });
    };

    useEffect(() => {
        // 数据存储，侧边栏使用
        // setSocials(socials);
        // pixel 埋点
        // eventView();
    }, []);

    const t = useTranslations("HomePage");

    return (
        <>
            <div
                className={`absolute bottom-[0.84rem] right-[0.12rem] z-50 flex w-[0.6944rem] flex-col items-center justify-center`}
            >
                {/* {React.cloneElement(curComponents, { onDestory: modalDestory })} */}
                <SlotSection />
                {/*轮盘  */}
                <WheelSection />
                {/*首充*/}
                <PaySection />
                {/* 红包雨icon */}
                <RedPacketSection />
                {/*未读消息*/}
                <MessageSection />
                {/*客服*/}
                <CustomerSection services={services} />
                {/* 签到 */}
                {/* <SignInSection /> */}
            </div>

            <div
                className={`grid`}
                style={{
                    gridTemplateColumns: ` repeat(${newServices && newServices.length >= 5 ? 5 : (newServices?.length ?? 1)},1fr)`,
                }}
            >
                {newServices.map((service, index) => {
                    return (
                        <Link
                            key={index}
                            href={service.url}
                            target={"_blank"}
                            className="bg-white m-[0.05rem] h-[0.3889rem] w-[0.3889rem] rounded"
                        >
                            <img
                                className={"h-[0.3889rem] w-[0.3889rem]"}
                                src={service.icon_url}
                                alt=""
                            ></img>
                        </Link>
                    );
                })}
            </div>

            <div className={"text-[#ced1ff]"}>{t("Service")}</div>

            {/*share*/}
            <div className={"my-[0.2rem] text-[0.12rem] text-[#ced1ff]"}>{t("Share")}</div>

            <Image
                src={"/logo2.png"}
                alt={"BCWIN777"}
                width={120}
                height={180}
                className={"mb-[0.2rem]"}
            />
        </>
    );
};

export default ServiceWidget;